<template>
    <el-dialog class="dialog" :destroy-on-close="true" :title="title" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <el-form-item label="门禁编号" prop="door_guid">
                <el-input :disabled="isEdit" v-model="formData.door_guid" placeholder="请输入门禁编号" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="门禁名称" prop="door_name">
                <el-input v-model="formData.door_name" placeholder="请输入门禁名称" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="所属门禁组" prop="group_sn">
                <el-select multiple  v-model="formData.group_sn" placeholder="请选择所属门禁组">
                    <el-option v-for="item in groupData" :key="item.group_sn" :label="item.group_name"
                        :value="item.group_sn"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="门禁方向" prop="door_direct">
                <el-select v-model="formData.door_direct" placeholder="请选择门禁方向">
                    <el-option v-for="item in doorDirectData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="授权清理" prop="door_clear" v-if="!isEdit">
            <div class="box-row box-center tooltip-el">
                <el-select v-model="formData.door_clear" placeholder="是否清空已授权数据">
                    <el-option v-for="item in doorClearData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <el-tooltip content="当选择清空时，将清空设备里已下发的所有授权">
                    <i class="el-icon-question"></i>
                </el-tooltip>
            </div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator"; //, Prop
import { Action, Getter, State } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { isInteger } from "@/utils/valid";
import uxInputTree from "@/components/input/tree";
@Component({
    mixins: [mixinDialogForm],
    components: { uxInputTree }
})
export default class equipmentDoorEdit extends Vue {
    // 新增
    @Action("equipmentDoor/add") itemAdd: any;
    // 编辑
    @Action("equipmentDoor/edit") itemEdit: any;
    @Getter("equipmentDoorGroup/all") groupData: any;
    @State((state) => state.sharing.doorDirect) doorDirectData: any;
    @State((state) => state.sharing.doorClear) doorClearData: any;
    editInit(data: any) {
        const me = this as any;
        data.door_direct = data.door_direct.toString();
        data.group_sn = data.group_arr;
        me.formData = Object.assign({}, me.formData, data);
    }

    // 表单数据
    formData: any = {
        door_name: "",
        door_guid: "",
        door_direct: "",
        door_clear: "",
        door_space: "1",
        group_sn: ''
    };

    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        door_name: [
            {
                required: true,
                message: "请输入门禁名称",
                trigger: "blur"
            }
        ],
        door_guid: [
            {
                required: true,
                message: "请输入门禁编号",
                trigger: "blur"
            }
        ],
        group_sn: [
            {
                required: true,
                message: "请选择门禁组",
                trigger: "blur"
            }
        ],
        door_direct: [
            {
                required: true,
                message: "请选择是否初始化凭证"
            },
            {
                validator: isInteger
            }
        ],
        door_clear: [
            {
                required: true,
                message: "请选择门禁方向"
            },
            {
                validator: isInteger
            }
        ]
    };

    // 获取全部
    /* @Action("equipmentDoor/all") getAll: any;
     successAfter() {
         // 刷新列表
         this.getAll(true);
     }*/
    // 标题
    get title() {
        const title = (this as any).isEdit ? "编辑" : "新增";
        return `${title}门禁`;
    }


}
</script>
